<!-- 商品的详情页 -->
<template>
    <div class="box">
        <Xtabbar class="x-tabbar"  @scroll="scroll" ref="Xtab"></Xtabbar>
        <Scroll ref="Ximgload" id="Xscroll" @showorhide="showorhide">
            <xswiper :goodsimg="goodsimg"></xswiper>
            <goodinfo :goodsinfo="goodsinfo"></goodinfo>
            <Xshop :shop="shop"></Xshop>
            <photo :photolist="photolist" @imgload="imgload"></photo>
            <Xgoodsparam :goodsparam="goodsparam" ref="Xparam"></Xgoodsparam>
            <say :say="say" ref="Xsay"></say>
            <goodslist :goodstype="recommend" ref="Xgoods"></goodslist>
        </Scroll>
        <backtop  @click.native="backtop"  ></backtop>
        <bottom @goshop="govuex"></bottom>
    </div>
</template>

<script>
//网络请求
import {detail,goodsinfo,shop,goodsparam,recommend} from "network/detail.js"


//mixin 混入的
import {mymixin} from "common/mixin.js"

//子组件
import Xtabbar from "./Xtabbar.vue"
import Xswiper from "./Xswiper.vue"
import goodinfo from "./goodinfo.vue"
import Xshop from "./shop.vue"
import Scroll from "../Home/childrens/Scroll.vue"
import photo from "./photo.vue"
import Xgoodsparam from "./Xgoodsparam.vue"
import say from "./say.vue"
import goodslist  from  "components/content/goods/goodslist.vue"
import backtop from "components/content/backtop/backtop.vue"
import bottom from "./bottom.vue"


export default {
 name:"detailitem",
 data () {
     return {
         iid:this.$route.params.iid,
         //商品图片信息
         goodsimg:[],
         //商品描述
         goodsinfo:{},
        //  店铺信息
         shop:{},
        //商品图片
         photolist:[],
         //商品尺寸
         goodsparam:{},
         //用户评论
         say:{},
         //商品推荐信息
         recommend:{},
         //各大组件的setofftop
         labeltop:[],
         //节流阀中的time
         time:"false",
          goshop:{}
     }
 },
 //mixins 混入
 mixins:[mymixin],
 components: {
    Xtabbar,
    Xswiper,
    goodinfo,
    Xshop,
    photo,
    Xgoodsparam,
    say,
    goodslist,
    backtop,
    bottom,
    Scroll
 },
 created () {
       //组件创建前进行网络请求(商品信息)
        detail(this.iid).then(res=>{
            //  console.log(res)
             this.goodsimg=res.data.result.itemInfo.topImages
             this.goodsinfo=new goodsinfo(res.data.result.itemInfo,res.data.result.columns,res.data.result.shopInfo.services)
             this.shop=new shop(res.data.result.shopInfo)
             this.photolist=res.data.result.detailInfo.detailImage[0].list
             this.goodsparam=new goodsparam(res.data.result.itemParams.info , res.data.result.itemParams.rule)
             //因为评论有时候没有 所以要先判断
             if(res.data.result.rate.list){
                 this.say=res.data.result.rate.list[0]
             }
            //  console.log(this.say)
            }).catch(rej=>{
                    console.log(rej)
            })

        //请求商品推荐信息
            recommend().then(res=>{
                    this.recommend =res.data.data
            }).catch(rej=>{
                 console.log(rej)
            })


 },
 methods: {
        newdetail(){
                console.log(23324)
        },
        imgload(){
            //   this.debounce(this.$refs.Ximgload.refresh,500)
                        this.$refs.Ximgload.refresh()
                        console.log(3422)
                        //图片加载后在这里得到各大组件的距离顶部的位置 在created和mounted 的到的值都不准确 要等到图片获取成功了才可以
                        this.labeltop.push(0)
                        this.labeltop.push(this.$refs.Xparam.$el.offsetTop)
                        this.labeltop.push(this.$refs.Xsay.$el.offsetTop)
                        this.labeltop.push(this.$refs.Xgoods.$el.offsetTop)
                        console.log(this.labeltop)
        },

        //滑动到一定位置 使指定商品页的导航栏变红
        showorhide(position){ 
            //防止labeltop数组中出现undefined
            if(-position.y>0 &&this.labeltop.indexOf("undefined")==-1){
                if(-position.y>0 &&-position.y<=this.labeltop[1]-10){
                    this.$refs.Xtab.pinkindex=0
                }else if(-position.y>this.labeltop[1]-10&&-position.y<=this.labeltop[2]-10){
                    this.$refs.Xtab.pinkindex=1
                }else if(-position.y>this.labeltop[2]-10&&-position.y<=this.labeltop[3]-10){
                    this.$refs.Xtab.pinkindex=2
                }else{
                    this.$refs.Xtab.pinkindex=3 
                }
            }else{
                    //数组中出现undefined就刷新
                   this.$refs.Ximgload.refresh()
            }
                
                // console.log(this.$refs.Xtab.pinkindex)
        },
           //点击商品页导航栏滚动
        scroll(pinkindex){
                this.$refs.Ximgload.scroll(-this.labeltop[pinkindex])
        },


        //加入购物车事件
        govuex(){
            this.goshop={}
             //得到商品信息
            this.goshop.photo=this.photolist[0]  //商品图片
            this.goshop.iid=this.iid     //商品id
            this.goshop.title=this.goodsinfo.title  //商品描述
            this.goshop.price=this.goodsinfo.newPrice //商品价格
            //promise 回调 添加成功后 给用户一个提示
            this.$store.dispatch('increment', this.goshop).then(function(data){
                alert(data)
            })
            // this.$store.state.shopcar.push(this.goshop)
            // console.log( this.$store.state.shopcar)
        } 
 },  
}

</script>
<style scoped>
  .x-tabbar{
        position: relative;
        background: #f6f6f6;
        z-index: 20;
        background: #f6f6f6;
  }
  #Xscroll{
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 15;
            background:#f6f6f6;
  }

</style>